<template>
  <div id="app">
    <MyCategory title="美食">
      <img slot="center" src="" alt="">
      <a href="#" slot="footer">更多美食</a>
    </MyCategory>
    <MyCategory title="游戏">
      <ul slot="center">
        <li v-for="(itme,index) in games" :key="index">{{ itme}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="#">单机游戏</a>
        <a href="#">网络游戏</a>
      </div>
    </MyCategory>
    <MyCategory title="电影">
      <video controls slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
      <template v-slot:footer>
        <div class="foot">
          <a href="#">经典</a>
          <a href="#">热门</a>
          <a href="#">推荐</a>
        </div>
        <h4>欢迎前来观影</h4>
      </template>
    </MyCategory>
  </div>
</template>
<script>
import MyCategory from './components/MyCategory'
export default {
name:'App',
components:{MyCategory},
data(){
  return{
    foods:['火锅','烧烤','小龙虾','牛排'],
    games:['穿越火线','英雄联盟','王者荣耀','和平精英'],
    films:['《肖生克的救赎》','《霸王别姬》','《楚门的世界》','《拆弹专家2》',]
  }
}
}
</script>
<style>
#app,.foot{
  display: flex;
  justify-content: space-around;
}
h4{
  text-align: center;
}
</style>